<template>
  <div class="pbx-delete__wrapper">
    <div class='pbx-delete__top'>
      <p class='pbx-delete-top__tip'>
        是否删除当前选定PBX：{{pbxNickName}}({{currentPBX}})?删除后当前pbx下所有的座席和服务号将全部删除！
      </p>
      <div class='pbx-delete__select'>
        <p>请输入密码：</p>
        <el-input type = 'password' v-model = 'pbxPassword'></el-input>
        <p class='pbx-rules__tip' v-show = 'passValidation'>
          输入的密码有误，请重新输入！
        </p>
      </div>
    </div>
    <div class="pbx-delete__footer">
      <el-button class = 'slide-box__button' @click='cancelClick'>
        取消
      </el-button>
      <el-button class = 'slide-box__button' type="primary" @click='saveClick'>
        删除
      </el-button>
    </div>
  </div>
</template>
<script>
  import { deepClone } from '@/utils/m7Utils'
  export default {
    name: 'pbxAdd',
    data () {
      return {
        passValidation: false,
        pbxPassword: ''
      }
    },
    props: {
      pbxNickName: {
        type: String,
        default: ''
      },
      currentPBX: {
        type: String,
        default: ''
      }
    },
    computed: {
      pbxList () {
        return this.$store.state.session.account.pbx
      }
    },
    methods: {
      saveClick () {
        if (this.pbxPassword !== '7moor.com') {
          this.passValidation = true
          this.$message.error(this.$t('validate.wrongPassword'))
        } else {
          this.passValidation = false
          this.removeAccountPbx()
        }
      },
      cancelClick () {
        this.passValidation = false
        this.pbxPassword = ''
        this.$emit('taskComplete')
      },
      removeAccountPbx () {
        let currentPBX = this.currentPBX
        this.$store.dispatch('removeAccountPbx', {'PBX': currentPBX}).then((res) => {
          if (res && res.success) {
            this.$message.success('删除PBX成功！')
            this.removeSessionPBX(currentPBX)
          } else {
            this.$message.error('删除PBX失败！')
            this.$emit('taskComplete')
          }
        })
      },
      removeSessionPBX (currentPBX) {
        let currentList = deepClone(this.pbxList)
        for (let i = 0; i < currentList.length; i++) {
          if (currentList[i].PBX === currentPBX) {
            currentList.splice(i, 1)
          }
        }
        this.addNewSessionPBX(currentList)
      },
      addNewSessionPBX (pbxList) {
        this.$store.commit('CHANGE_SESSION_ACOUNT', {pbx: pbxList})
        this.$emit('taskComplete')
      }
    }
  }
</script>
<style lang="stylus" scoped>
 .pbx-delete__wrapper
  height 100%
  display flex
  flex-direction column
  .pbx-delete__top
   .pbx-delete-top__tip
    color #3B5998
   flex 1
   overflow-y auto
   padding 20px
   box-sizing border-box
  .pbx-delete__radio
    box-sizing border-box
    margin-bottom 20px
  .pbx-delete__select
    .pbx-rules__tip
      color #FF6B6B
    box-sizing border-box
    margin-bottom 20px
    .el-select
     width 100%
     box-sizing border-box
     margin-bottom 0px
    p
     font-size 14px
     font-family PingFangSC-Medium
     font-weight 500
     margin-bottom 6px
  .pbx-delete__tip
    height 133px
    width 100%
    padding 20px
    box-sizing border-box
    background rgba(246,246,246,1)
    color #3B5998
    p
     line-height 18px
     margin-bottom 10px
    span
     color white
     margin 0px 6px 0px
     padding 1px 3px 1px
    .success
      margin-left 0px
      background #41B27F
    .warning
      background #FF9202
    .important
      background #FF6B6B
    .inverse
      background #A5A5A5
  .pbx-delete__footer
    background rgba(255,255,255,1)
    box-shadow 0px -2px 4px 0px rgba(5,49,38,0.05)
    border-top 1px solid rgba(232,232,232,1)
    display flex
    justify-content center
    padding 10px 0 10px
    box-sizing border-box
    .slide-box__button
      padding 8px 20px 8px
      box-sizing border-box
</style>
